/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:18:18
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-09 17:11:54
 * @FilePath: \Webgl-basic\src\9.三角旋转.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createBufferTriangle
} from '../lib/index'
const canvas = document.querySelector('canvas')
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
          // 指定浮点数精度为中等精度  
          precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
          attribute vec4 a_Position;
          //定义一个偏移量
          attribute float a_CosB,a_SinB;
          //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
          void main(){
            float x = a_Position.x * a_CosB - a_Position.y * a_SinB;
            float y = a_Position.x * a_SinB + a_Position.y * a_CosB;
            //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
            gl_Position=vec4(x,y,0.0,1.0);

          }`
const fs_shader = /*glsl*/ `
        precision mediump float;
        void main(){
            //gl_FragColor是最后输出的像素颜色,是一个四维的数据
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);            
        }`
//编译着色器,生成程序对象
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program
let points = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])


//获取a_CosB,a_SinB在着色器中的位置
const a_CosB = gl.getAttribLocation(program, 'a_CosB');
const a_SinB = gl.getAttribLocation(program, 'a_SinB');
const n = createBufferTriangle(gl, points,'a_Position')
//应以GUi
const GUI = lil.GUI;
const gui = new GUI()
//定义一个偏移量数据
const rotate = {
    angle: 0
}


const onChangeAngle = () => {
    //转换成jiaodu
    const radian = rotate.angle * Math.PI / 180;
    const sinB = Math.sin(radian);
    const cosB = Math.cos(radian);

    gl.vertexAttrib1f(a_SinB, sinB)
    gl.vertexAttrib1f(a_CosB, cosB)
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n)
}

gui.add(rotate, 'angle', 0, 360, 1).onChange(onChangeAngle)
onChangeAngle()
// const a_Position = gl.getAttribLocation(program,'a_Position')
// gl.clear(gl.COLOR_BUFFER_BIT)
// //创建缓冲区
// const buffer = gl.createBuffer()
// //给定缓冲区的用途
// gl.bindBuffer(gl.ARRAY_BUFFER,buffer)
// //向ARRY_BUFFER中写入数据
// gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)
//指定gpu如何去缓冲区中取值
// target,大小,数据类型,是否归一化,步长,偏移值
// gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,2*4,0)
// gl.enableVertexAttribArray(a_Position)        
// //执行绘制
// gl.drawArrays(gl.TRIANGLES,0,3)